<template>
  <div class="livesalelistBox">
    <div class="serchWrap">
      <div class="serchInput">
        <div class="serchInput_left">
          <div class="serchInput_suzzy">
            <el-input v-model="serchFrom.fuzzyQuery" placeholder="模糊搜素" />
          </div>
          <br />
          <div class="serchInput_range">
            <p>商品价格区间</p>
            <el-input v-model="serchFrom.priceRange" placeholder="最低价格" />
            <el-input v-model="serchFrom.priceRange" placeholder="最高价格" />
          </div>
        </div>
        <div class="serchInput_right">
          <div class="serchInput_right_top">
            <div class="serchInput_right_top_type">
              <p>商品分类</p>
              <el-select>
                <el-option value="1"></el-option>
              </el-select>
            </div>
            <div class="serchInput_right_top_role">
              <p>带货权限</p>
              <el-select>
                <el-option value="1"></el-option>
              </el-select>
            </div>
          </div>
          <br />

          <div class="serchInput_range">
            <p>预计收益区间</p>
            <el-input v-model="serchFrom.priceRange" placeholder="最低价格" />
            <el-input v-model="serchFrom.priceRange" placeholder="最高价格" />
          </div>
        </div>
      </div>

      <div class="serchBtn">
        <el-button :icon="Search" type="primary">查询</el-button>
        <br />
        <el-button :icon="RefreshRight" type="warning">重置</el-button>
      </div>
    </div>
    <div class="tableWrap">
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="productName" label="商品名称" />
            <el-table-column prop="productType" label="商品分类" />
            <el-table-column prop="productImg" label="商品图片">
              <template #default="{ row }">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="row.productImg"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>

            <el-table-column prop="productPrice" label="商品价格" />
            <el-table-column prop="expectedProfit" label="预计收益" />
            <el-table-column prop="salesAuthority" label="带货权限" />
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button color="#165DFF" size="small">
                  <el-icon>
                    <Plus />
                  </el-icon>
                  操作
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { Plus, Search, RefreshRight } from "@element-plus/icons-vue";

const serchFrom = reactive({
  fuzzyQuery: "", //模糊查询
  productType: "", //商品分类
  salesAuthority: "", //带货权限
  priceRange: "", //价格区间
  projectedProfitRange: "", //预计收益区间
});
const tableData = reactive<
  {
    productName: string;
    productType: string;
    productImg: string;
    productPrice: number;
    expectedProfit: number;
    salesAuthority: boolean;
  }[]
>([
  {
    productName: "男童加绒洋气秋冬装2024新款儿童加绒加厚休闲保暖套头衫冬季上衣",
    productType: "服饰内衣",
    productImg:
      "https://ms.bdimg.com/pacific/0/pic/-942620453_996796440.png?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00",
    productPrice: 29.0,
    expectedProfit: 3.0,
    salesAuthority: false,
  },
  {
    productName: "男童加绒洋气秋冬装2024新款儿童加绒加厚休闲保暖套头衫冬季上衣",
    productType: "服饰内衣",
    productImg:
      "https://ms.bdimg.com/pacific/0/pic/-942620453_996796440.png?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00",
    productPrice: 29.0,
    expectedProfit: 3.0,
    salesAuthority: false,
  },
  {
    productName: "男童加绒洋气秋冬装2024新款儿童加绒加厚休闲保暖套头衫冬季上衣",
    productType: "服饰内衣",
    productImg:
      "https://ms.bdimg.com/pacific/0/pic/-942620453_996796440.png?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00",
    productPrice: 29.0,
    expectedProfit: 3.0,
    salesAuthority: false,
  },
  {
    productName: "男童加绒洋气秋冬装2024新款儿童加绒加厚休闲保暖套头衫冬季上衣",
    productType: "服饰内衣",
    productImg:
      "https://ms.bdimg.com/pacific/0/pic/-942620453_996796440.png?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00",
    productPrice: 29.0,
    expectedProfit: 3.0,
    salesAuthority: false,
  },
  {
    productName: "男童加绒洋气秋冬装2024新款儿童加绒加厚休闲保暖套头衫冬季上衣",
    productType: "服饰内衣",
    productImg:
      "https://ms.bdimg.com/pacific/0/pic/-942620453_996796440.png?x=0&y=0&h=200&w=300&vh=200.00&vw=300.00&oh=200.00&ow=300.00",
    productPrice: 29.0,
    expectedProfit: 3.0,
    salesAuthority: false,
  },
]);
</script>

<style lang="scss" scoped>
:deep(.cell) {
  text-align: center;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
:deep(.el-table .el-table__body td) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.example-basic .el-date-editor {
  margin: 8px;
}
:deep() .tableWrap {
  font-size: 14px;
  width: 100%;
  margin-top: 16px;
}
.serchInput_right {
  display: flex;
  flex-direction: column;
  > div {
    margin-top: 10px;

    width: 60%;
  }
}
.serchInput_left {
  display: flex;
  flex-direction: column;
  > div {
    margin-top: 10px;
    width: 60%;
  }
}

.serchInput_suzzy {
  width: 100%;
}
.serchInput_right_top {
  display: flex;
  flex-wrap: wrap;
  > div {
    flex: 1;
    display: flex;
    &:nth-of-type(2) {
    }
    > p {
      flex: 1;
      text-wrap: nowrap;
    }
    > div {
      flex: 3;
    }
  }
  // > .serchInput_right_top_type {
  //   display: flex;
  //   > p {
  //     flex: 1;
  //   }
  //   > div {
  //     flex: 3;
  //   }
  // }
}
.serchWrap {
  display: flex;
  justify-items: space-between;
  align-items: center;
  p {
    width: -webkit-fill-available;
    margin: 0;
    font-family: Alibaba PuHuiTi 3;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: left;
  }
}
.serchInput {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > div {
    flex: 1;
  }
}
.serchBtn {
  flex: 1;
  border-left: 1px solid gray;
  // width: 15%;
  text-align: center;
  > button:nth-of-type(2) {
    margin-top: 20px;
  }
}
a {
  color: #165dff;
}
.serchInput_range {
  display: flex;
  > p {
    flex: 1;
    display: block;
    text-wrap: nowrap;
    margin-right: 16px;
  }
  > div {
    flex: 3;
    display: flex;
  }
}
</style>
